<template lang="html">
    <div class="finance">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-tickets"></i> 财务管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form :inline="true" class="demo-form-inline" >
                <el-form-item label="开始日期：" label-width="100px">
                    <el-date-picker value-format="yyyy-MM-dd" v-model="startDate" type="date" class="handle-date"
                    placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束日期：" label-width="100px">
                    <el-date-picker value-format="yyyy-MM-dd" v-model="endDate" type="date" class="handle-date"
                                    placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search()">查询</el-button>
                    <!-- <el-button type="info" @click="exprot">导出</el-button> -->
                </el-form-item>
               <el-form-item>
                    <el-button type="warning" @click="Reset()">重置</el-button>
                </el-form-item>
            </el-form>
            <div style="height:40px;"></div>
            <el-table v-loading="loading" :data="tableData" bfinance style="width: 100%" ref="multipleTable">
                <el-table-column prop="id" label="订单ID" width="100" align="center"></el-table-column>
                <el-table-column prop="exchange_code" label="订单号" width="220" align="center"></el-table-column>
                <el-table-column prop="submit_time" label="交易时间" width="170" align="center"></el-table-column>
                <el-table-column prop="buyer_nickname" label="买家昵称" width="190" align="center"></el-table-column>
                <el-table-column prop="seller_nickname" label="卖家昵称" width="190" align="center"></el-table-column>
                <el-table-column prop="buyer_bond" label="买家保证金" width="120" align="center"></el-table-column>
                <el-table-column prop="seller_bond" label="卖家保证金" width="120" align="center"></el-table-column>
                <el-table-column prop="paymentmethodbuyer" label="买家支付方式" width="140" align="center"></el-table-column>
                <el-table-column prop="paymentmethodseller" label="卖家支付方式" width="140" align="center"></el-table-column>
                 <el-table-column label="商品信息" align="center">
                    <template slot-scope="scope" >
                        <el-button size="small" type="text" @click="Buyergoods(scope.$index, scope.row)">买家商品</el-button>
                        <el-button size="small" type="text" @click="Sellergoods(scope.$index, scope.row)" >卖家商品</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 卖家商品信息 -->
            <el-dialog title="卖家商品信息" :visible.sync="Sellerinfo" center>
                <el-form style="width:500px; margin:0 auto"  label-width="110px">
                    <el-form-item label="商品标题：">
                        <div>{{ sellerGoods.title }}</div>
                    </el-form-item>
                    <el-form-item label="商品图片：">
                        <div><img :src="sellerGoods.head_img" style="width:150px;height:120px;"></div>
                    </el-form-item>
                    <el-form-item label="商品ID：">
                        <div>{{ sellerGoods.goods_id }}</div>
                    </el-form-item>
                    <el-form-item label="商品数量：">
                        <div>{{ sellerGoods.goods_num }}</div>
                    </el-form-item>
                    <el-form-item label="商品价格：">
                        <div>{{ sellerGoods.goods_price | FiltrationPrice }}</div>
                    </el-form-item>
                    <el-form-item label="发布时间：">
                        <div>{{ sellerGoods.create_time }}</div>
                    </el-form-item>
                    <el-form-item label="商品品相：">
                        <div>{{ sellerGoods.out_view }}</div>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button style="width:200px;" type="primary" @click="Sellerinfo=false">返回</el-button>
                </div>
            </el-dialog>
            <!-- 买家商品信息 -->
            <el-dialog title="买家商品信息" :visible.sync="Buyerinfo">
                <el-table :data="buyerGoodsList">
                    <el-table-column property="goods_id" label="商品ID" width="90" align="center"></el-table-column>
                    <el-table-column label="商品图片" width="170" align="center">
                        <template slot-scope="scope">
                            <div><img :src="scope.row.head_img" style="width:150px;height:120px"></div>
                        </template>
				    </el-table-column>
                    <el-table-column property="title" label="商品标题" width="180" align="center"></el-table-column>
                    <el-table-column property="out_view" label="商品品相" width="100" align="center"></el-table-column>
                    <el-table-column property="goods_price" label="商品价格" width="120" align="center"></el-table-column>
                    <el-table-column property="goods_num" label="商品数量" width="80" align="center"></el-table-column>
                    <el-table-column property="create_time" label="发布时间" width="170"  align="center"></el-table-column>
                </el-table>
                <div slot="footer" class="dialog-footer">
                    <el-button style="width:200px;" type="primary" @click="Buyerinfo=false">返回</el-button>
                </div>
            </el-dialog>
            <!-- 分页 -->
            <div class="pagination" v-show="totalPages > 1">
                <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="pageSize" :total="totalElements" background>
                </el-pagination>
            </div>
        </div>
    </div>

  </div>
</div>
</template>

<script>
import { GetExchangemargin } from '@/api/finance';
    export default {
        name: "Exchangemargin",
        data() {
            return {
                pageIndex: 1, // 当前页码
                pageSize: 10, // 每页10条
                totalPages: 1, // 默认的总页数
                totalElements: 1, // 总条数
                tableData: [], // 表格数据
                delVisible: false, // 删除确认提示，默认隐藏
                order_code: '', // 订单号
                startDate: '', // 开始日期
                endDate: '', // 结束日期
                loading: true, // 加载状态
                sellerGoods: {}, // 卖家商品信息
                buyerGoodsList: [], // 买家商品数据
                Sellerinfo: false, // 卖家商品信息弹窗状态
                Buyerinfo: false // 买家商品信息弹窗状态
            }
        },
        // 实例创建完成后被立即调用
        mounted() {
            // 获取商品交易流水数据
            this.GetFtradingData();
        },
        // 方法
        methods: {
            // 获取商品交易流水数据
            GetFtradingData() {
                var param = {
                    startDate: this.startDate, // 开始时间
                    endDate: this.endDate, // 结束时间
                    pageIndex: this.pageIndex, // 页码
                    pageSize: this.pageSize // 页数
                };
                GetExchangemargin(param).then( res=> {
                    // console.log(res);
                    if(res.code == 200){
                        var data = res.data; // 当前返回的数据
                        data.list.forEach((value, index) => {
                            if(value.buyer_bond_pay == 1){
                                value.paymentmethodbuyer = '支付宝';
                            }else if(value.buyer_bond_pay == 2){
                                value.paymentmethodbuyer = '微信';
                            }else if(value.buyer_bond_pay == 3){
                                value.paymentmethodbuyer = '余额';
                            }else{
                                value.paymentmethodbuyer = '未支付';
                            }
                            if(value.seller_bond_pay == 1){
                                value.paymentmethodseller = '支付宝';
                            }else if(value.seller_bond_pay == 2){
                                value.paymentmethodseller = '微信';
                            }else if(value.seller_bond_pay == 3){
                               value.paymentmethodseller = '余额'; 
                            }else{
                               value.paymentmethodseller = '未支付'; 
                            }
                            var Price = Number(value.goods_price);
                            value.goods_price = Price.toFixed(2);
                            var Buyer = Number(value.buyer_bond);
                            value.buyer_bond = Buyer.toFixed(2);
                            var Seller = Number(value.seller_bond);
                            value.seller_bond = Seller.toFixed(2);
                        });
                        this.tableData = data.list; // 列表数据
                        this.loading = false; // 加载状态
                        this.totalElements = data.total; // 总条数
                        this.totalPages = Math.ceil(data.total / this.pageSize); // 总页数
                    }else{
                        this.$notify.error({
                            title: '异常',
                            offset: 100,
                            message: res.msg
                        });
                    }
                 })
            },
            // 分页导航
            handleCurrentChange(val) {
                this.pageIndex = val;
                this.loading = true; // 加载状态
                this.GetFtradingData();
            },
            //查询
            search() {
                this.loading = true; // 加载状态
                this.GetFtradingData();
            },
            // 重置
            Reset() {
                this.startDate = ''; // 开始时间
                this.endDate = ''; // 结束时间
                this.loading = true; // 加载状态
                this.GetFtradingData();
            },
            // 买家信息
            Buyergoods(index, row) {
                this.Buyerinfo = true; // 弹窗状态
                row.buyerGoodsList.forEach((value, index) => {
                    var Price = Number(value.goods_price);
                    value.goods_price = Price.toFixed(2);
                });
                this.buyerGoodsList = row.buyerGoodsList; // 买家商品数据
            },
            // 卖家信息
            Sellergoods(index, row) {
                // console.log(index, row);
                this.Sellerinfo = true; // 弹窗状态
                this.sellerGoods = row.sellerGoods; // 卖家商品信息
            },
            //导出
            exprot(){
                if(this.startDate!="" &&this.endDate==""||this.startDate=="" &&this.endDate!=""){
                    this.$notify({
                        title: '警告',
                        message: '请选择开始日期与结束日期',
                        type: 'warning'
                    });
                }else{
                    var str ="";
                    // if(this.order_code!=""){
                    //     str +='&id='+this.order_code;
                    // }
                    if(this.nikeName!=""){
                        str +='&nikeName='+this.nikeName;
                    }
                    if(this.beginDate!=""){
                        str +='&beginDate='+this.beginDate;
                    }
                    if(this.endDate!=""){
                        str +='&endDate='+this.endDate;
                    }
                    if(str!=""){
                        str ="?"+str.slice(1);
                    }   
                    
                    //console.log(str);
                    window.open("http://api.xfkka.com/manage/finance/export"+str);  
                }   
            }
        },
        // 过滤器
        filters: {
            // 价格
            FiltrationPrice(value) {
                if (value && value != '') {
                    value = Number(value);
                    return value.toFixed(2);
                }
            }
        }
    }
</script>

<style lang="css">
</style>
